<!DOCTYPE html>
<html>
<head>
  <title>UserList</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!-- 所有的 css & js 资源 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../../static/sa.css">
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
  <script src="../axios.min.js"></script>
  <script src="../../static/sa.js"></script>
  <style type="text/css">
    /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
    .data-table .el-table__body-wrapper{transition: all 0.3s;} */
  </style>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
  <div class=c-panel">
    <el-table class="data-table" ref="data-table" :data="dataList" size="small">
      <el-table-column label="userFrom.userId" prop="userFrom.userId"  ></el-table-column>
      <el-table-column label="userFrom.name" prop="userFrom.name"  > </el-table-column>
      <el-table-column label="userTo.userId" prop="userTo.userId"  > </el-table-column>
      <el-table-column label="userTo.name" prop="userTo.name"  > </el-table-column>
      <el-table-column label="time" prop="time" ></el-table-column>
      <el-table-column label="total" prop="total"></el-table-column>
    </el-table>
  </div>
</div>
<script>
  var mockData = {
    code: 200,
    msg: 'ok',
    data:[
      {
        "userFrom": {
          "userId": 1111,
          "balance": 5204.34,
          "type": 1,
          "email": "a.bqwihcxko@bgobdp.coop",
          "password": "bjfnbrtfh",
          "name": "冯丽",
          "description": "响证好重下族求资集度身更规作即传装它。你起求速切干研段平应线可必极王际应电。装用于象公动即前说调素构点族向。家史科据又是花步积海立专不厂。带石以好专府来图部第都识形等办。",
          "logoPath": "http://osgfedow.gt/wngmx",
          "legalRequest": false,
          "username": "沈涛",
          "tokenName": "队专即她",
          "tokenValue": "mollit consectetur labore"
        },
        "userTo": {
          "userId": 22222222,
          "balance": 1958.24,
          "type": 0,
          "email": "s.gmik@jlxesxj.bb",
          "password": "oetnevxntnuifeu",
          "name": "任刚",
          "description": "品共外机厂完流都样正体志程取。管根京府根资地去日点音内研。政法体亲西快克话见政厂队入来。局规增式可他往领按转安方算得达断转火。根美情统平别算体新想支价龙。",
          "logoPath": "http://umdf.ru/ckftcin",
          "legalRequest": true,
          "username": "贾军",
          "tokenName": "农容引何作",
          "tokenValue": "cillum qui Ut Excepteur"
        },
        "time": "1631247525",
        "total": 1068.17
      }
    ]
  }
  var app = new Vue({
    el: '.vue-box',
    data: {
      sa: sa,
      p: { // 查询参数
        id: '',
        title: '',
        sortType: 0,
        pageNo: 1,
        pageSize: 10,
      },
      dataCount: 0,	// 数据总数
      dataList: [] // 数据集合
    },
    methods: {
      // 数据刷新
      f5: function() {
        // TODO: 获取数据
        const url = "http://localhost:8080/api/v1/transaction?userId=900000000";
        axios.get(url).then(function(response) {
          // console.log(response);
          this.dataList = response.data;
          // console.log(this.dataList);
          sa.f5TableHeight();		// 刷新表格高度
        }.bind(this))
      }
      // sa.ajax2('/VocArticle/getList', this.p, function(res){
      //   this.dataList = res.data;	// 数据
      //   this.dataCount = res.dataCount;		// 分页
      //   sa.f5TableHeight();		// 刷新表格高度
      // }.bind(this), {res: mockData});
    },
    created: function() {
      this.f5();
      sa.onInputEnter();		// 监听输入框的回车事件，执行查询
    }
  })
</script>
</body>
</html>
